<template>
	<view class="whole">
		<view class="custom-navbar">
			<view class="left">
				<!-- 返回按钮 -->
				<image class="iconfont icon-xiangzuojiantou" @click="goBack"></image>
			</view>
			<view class="center">{{ title }}</view>
			<view class="right">
				<!-- 搜索按钮 -->
				<image class="iconfont icon-sousuo" @click="handleSearch"></image>
				<view class="newly-built-button" @click="newlyBuilt">新建</view>
			</view>
		</view>
	<view
	  class="content"
	>
	  <dynamic-list-xhd
	  class="list"
	  :itemList="favorites"
	  :viewHeight="viewHeight"
	  :itemHeight="130"
	  :loadCount="loadCount" 
	  :fetchData="fetchFavorites"
	  :needRefresh="true"
	  :startRefreshOnce="fetchDataOnce"
	  >
	  
	   <!-- 头部插槽的内容 -->
	    <template   v-slot:header>
	          <view class="custom-slot-header">
	            <text>{{favorites.length===0?'没有收藏夹':favorites.length+'个收藏夹'}}</text>
	          </view>
	     </template>
	  
	  <template v-slot:item="{ item }" >
	  		<!--文件夹-->
			<view class="folder-item" @click="displyBlogCollection(item)">
				<view class="left">
					<view class="folder-header">
					    <view class="folder-info">
					      <view class="folder-name">{{ item.name }}</view>
					      <view class="default-tag" v-if="item.isDefault">默认</view>
					    </view>
					</view>
					<!-- 第二行：文件夹内容和可见性状态（公开/私密） -->
					<view class="folder-details">
					  <view class="folder-content">内容: {{ item.contentCount }} 项</view>
					  <view class="visibility-status">{{item.visibility === 1 ? '公开' : '私密' }}</view>
					</view>
				</view>
				<view class="right">
					<!-- 右侧选择框 -->
					
					<view class="select-icon" @click.stop="toggleSelection(item)">
						<!--icon-weibiaoti5-->
						<image class="iconfont icon-weibiaoti5 icon" ></image>
					</view>
				</view>
			</view>
	  </template>
	  
	  </dynamic-list-xhd>
	</view>
		
		<!--开启删除框-->
		<view  :class="['delete-folder-modal', { 'slide-in': isShowDeleteFolderModal, 'slide-out': ! isShowDeleteFolderModal }]" @click="isShowDeleteFolderModal=false">
			<view class="modal-content" @click.stop >
				 <!-- 第一行：编辑收藏夹 -->
				    <view class="modal-item" @click="editFavorites">
				     <image class="iconfont icon-shoucangjia icon" ></image>
				      <text class="text">编辑收藏夹</text>
				    </view>
				    
				    <!-- 第二行：删除收藏夹 -->
				    <view class="modal-item" @click="deleteFavorites">
				      <image class="iconfont icon-cuowu icon" ></image>
				      <text class="text">删除收藏夹</text>
				    </view>
			</view>
		</view>
		<!--修改新建文件夹-->
		<view  :class="['update-create-folder-modal-background', { 'fade-out':  !isShoeUpdateAndCreateFolderModal, 'fade-in': isShoeUpdateAndCreateFolderModal}]"  ></view>
		<view  :class="['update-create-folder-modal', { 'slide-in': isShoeUpdateAndCreateFolderModal, 'slide-out': ! isShoeUpdateAndCreateFolderModal }]" @click=" isShoeUpdateAndCreateFolderModal=false">
		    <view class="update-create-folder-content" @click.stop>
				<view class="header">
					<image  class="iconfont  icon-cuowu2 "  @click="isShoeUpdateAndCreateFolderModal=false" ></image>
					 <text class="modal-title">{{isEditOrCreate==='edit'?'编辑收藏夹':'新建收藏夹'}}</text>
					<view class="save-button" @click="saveFolder">保存</view>
				</view>
				
				<view class="folder-name-container">
				  <!-- 文件夹名称输入框 -->
				  <input v-model="newFolderName" class="folder-name-input" placeholder="请输入文件夹名称" maxlength="15" />
				  <!-- 文件夹名称字符数 -->
				  <view class="char-count">{{ newFolderName.length }}/15</view>
				</view>
				
				 <!-- 文件夹描述输入框 -->
				  <view class="folder-description-container">
				    <textarea v-model="folderDescription" class="folder-description-input" placeholder="请输入文件夹描述(选填)" maxlength="200"></textarea>
				    <view class="description-count">{{ folderDescription.length }}/200</view>
				  </view>
				  
				  <view class="public-visibility">
				    <!-- 公开/私密文本 -->
				    <view class="visibility-text">公开</view>
				  
				    <!-- 选择框 -->
				    <view class="select-icon" @click="toggleVisibility">
				      <image 
				        :src="isPublic ? '/static/img/round_check.png' : '/static/img/round.png'" 
				        class="icon" 
				      />
				    </view>
				  </view>
				  
				  <view class="no-public-visibility">
				    <!-- 公开/私密文本 -->
				    <view class="visibility-text">私密</view>
				  
				    <!-- 选择框 -->
				    <view class="select-icon" @click="toggleVisibility">
				      <image 
				        :src="!isPublic ? '/static/img/round_check.png' : '/static/img/round.png'" 
				        class="icon" 
				      />
				    </view>				  							
				  </view>
				  
				  <view class="default">
				    <!-- 公开/私密文本 -->
				    <view class="visibility-text">默认</view>
				  
				    <!-- 选择框 -->
				    <view class="select-icon" @click="toggleDefault">
				      <image 
				        :src="isDefault ? '/static/img/round_check.png' : '/static/img/round.png'" 
				        class="icon" 
				      />
				    </view>				  							
				  </view>
		    </view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 title: '收藏夹', // 页面标题
				 viewHeight:0,
				 loadCount:10,
				 fetchDataOnce:true,//头一次加载
				 isShowDeleteFolderModal:false,
				isShoeUpdateAndCreateFolderModal:false,
				 selectedDelectFolder:undefined,
				 selectedEditFavorites:undefined,
				 newFolderName:'',
				 folderDescription:'',
				 isPublic: true,  // 默认选择“公开”
				isDefault:false,
				 isEditOrCreate:'edit',
				 newFolderName:'',
				 favorites:[
					 { id: 1, name: '收藏夹1', isDefault: true, contentCount: 10, visibility: 1,description:"nihao"},
					  { id: 2, name: '收藏夹2', isDefault: false, contentCount: 5, visibility: 0,description:"nihao1"},
					 { id: 3, name: '收藏夹3', isDefault: false, contentCount: 7, visibility: 1 ,description:"nihao2"},
				 ],//文件夹的原始数据
			}
		},
		onLoad() {
			this.calculateViewHeight();//计算存放的高度
		},
		methods: {
			goBack() {
			  uni.navigateBack(); // 返回上一页
			},
			displyBlogCollection(item){
				// 将 item 转换为 JSON 字符串
				    const itemString = JSON.stringify(item);
				    
				    // 使用 encodeURIComponent 对字符串进行编码，以确保特殊字符不会导致 URL 问题
				    const encodedItem = encodeURIComponent(itemString);
				uni.navigateTo({
					url: `/pages/blogCollectionDisplay/blogCollectionDisplay?data=${encodedItem}`
				})
			},
			toggleSelection(folderValue) {
				
			      // 直接使用传入的 folderValue 对象来进行查找
			       const folder = this.favorites.find(f => f.id === folderValue.id);
			       
			       if (folder) {
			         this.selectedDelectFolder = folder;  // 设置选中的删除文件夹 ID
			         this.isShowDeleteFolderModal = true;      // 显示删除弹窗
			         console.log("0k");
			       }
			    },
			editFavorites(){
				 const folder=this.selectedDelectFolder ;
				 if(folder){
					 this.isShowDeleteFolderModal=false;
					 this.isEditOrCreate='edit';
					 this.folderDescription=folder.description,
					  this.isPublic=folder===1,  // 默认选择“公开”
					this. isDefault=folder.isDefault,
					 this.newFolderName=folder.name;
					 
					 
				this.isShoeUpdateAndCreateFolderModal=true;
				return;
				}
				 this.isShowDeleteFolderModal=false;
				uni.showToast({
				title:'文件夹不存在',
				icon:"error",
				duration:1000
				 })
			},
			newlyBuilt(){
				this.folderDescription='',
				  this.isPublic=true,  // 默认选择“公开”
				this. isDefault=false,
				 this.newFolderName='';
				 this.isEditOrCreate='create';
				this.isShoeUpdateAndCreateFolderModal=true;
			},
			saveFolder(){
				if(this.newFolderName.length===0){
					uni.showToast({
					title:'文件名不能为空',
					icon:"error",
					duration:1000
					 })
					 return;
				}
				if(this.isEditOrCreate==='create'){
					console.log("新建文件夹");
					this.isShoeUpdateAndCreateFolderModal=false;
				}else if(this.isEditOrCreate==='edit'){
					console.log("更新文件夹");
					this.isShoeUpdateAndCreateFolderModal=false;
				}else{
					uni.showToast({
					title:'前端保存出现类型错误',
					icon:"error",
					duration:1000
					 })
				}
			},
			deleteFavorites(){
				//想要删除收藏夹
				this.isShowDeleteFolderModal=false;
				uni.showModal({
					title:"删除收藏夹",
					content:"删除后收藏内容会一起被删除",
					cancelText:"取消",
					confirmText:"删除",
					success: (res) => {
						if(res.confirm){
							//要求删除收藏夹
							if(this.selectedDelectFolder.isDefault){
								uni.showToast({
								title:'不能删除默认文件夹',
								icon:"none",
								duration:1000
								 })
								return;
							}
							this.favorites= this.favorites.filter(folder => folder.id !== this.selectedDelectFolder.id);
						}else{
							this.isShowDeleteFolderModal=true;
							return;
						}
					}
				})
			},
			calculateViewHeight() {
			    this.$nextTick(() => {
			        const query = uni.createSelectorQuery().in(this);
			        // 获取 index-header-xhd 的高度
			        query.select('.content').boundingClientRect(headerData => {
			            this.viewHeight =headerData ? headerData.height : 0 ;
			            console.log('可用高度:', this.viewHeight);
			        }).exec();
			    });
			},
			async fetchFavorites(count,type){
				//加载文件夹的所有信息
				return new Promise((resolve) => {
					console.log("type",type);
					if(this.fetchDataOnce){
						this.fetchDataOnce=false;//只会加载一次
					}
					resolve([]);
						// this.getData(count)
						//     .then(result => {
						//         if(result){
						// 			if(result.code===1){
						// 				console.log('Fetched data:',result.data );
										
						// 			}else{
						// 				resolve([]);
						// 			}
						// 		}else{
						// 			resolve([]);
						// 		}
						// 		//this.recommendedPostRefresh=false;
						//     })
						//     .catch(error => {
						// 		resolve([]);
						//         console.error('Error fetching data:', error);
						//     });
						//console.log(result);
				    });	
			}
		}
	}
</script>

<style lang="scss" >
.whole {
  height: 100%; /* 使整个容器充满屏幕高度 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  background-color: #f0f0f0; /* 背景颜色 */
  
  .update-create-folder-modal-background {
    position: fixed; /* 固定定位，覆盖整个页面 */
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* 黑色背景，透明度为0.3 */
    z-index: 998; /* 背景层次在内容下方 */
    opacity: 0;
    transform: translateY(100%);
    transition:  opacity 0.1s ease; /* 添加过渡效果 */
  }
  .update-create-folder-modal-background.fade-in {
    transform: translateY(0); /* 滑入 */
    opacity: 1; /* 完全可见 */
  }
 
  .update-create-folder-modal-background.fade-out {
  	transform: translateY(100%); /* 滑入 */
      opacity: 0; /* 完全透明 */
  }
  .update-create-folder-modal{
  	position: fixed;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	width: 100%;
  	height: 100%;
  	display: flex;
  	justify-content: center;
  	align-items: flex-end; /* 从底部对齐 */
  	z-index: 10001; /* 确保模态框位于最上层 */
  	/* 初始状态为隐藏 */
  	transform: translateY(100%);
  	opacity: 0;
  	transition: transform 0.3s ease, opacity 0.1s ease; /* 添加过渡效果 */
  	//background-color: rgba(0, 0, 0, 0.5);
  	.update-create-folder-content{
  		  background-color: white;
  		//background-color:;
  		 padding: 20rpx;
  		 border-radius: 30rpx;
  		 width: 100%;
  		// height: 70%; /* 最大高度 */
  		 box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  		 display: flex;
  		 flex-direction: column; /* 纵向布局 */
  		 position: relative;
  		 .header{
  			
  		 	padding: 10rpx;
  		 	height: 50rpx;
  		 	display: flex; /* 使用flex布局 */
  		 	align-items: center; /* 垂直居中对齐 */
  		 	 justify-content: space-between; /* 左右对齐 */
  		 	.iconfont{
  		 		margin-right: 10rpx;
  		 			//background-color: red;
  		 		  color: #ccc;
  		 		  font-size: 45rpx;
  		 		  width: 45rpx;
  		 		  height: 45rpx;
  		 		  text-align: center;
  		 		  line-height: 45rpx;
  		 	}
  		 	.modal-title {
  		 	    flex: 1; /* 占据剩余空间 */
  		 	    text-align: center; /* 中间对齐 */
  		 	    font-size: 18px; /* 字体大小 */
  		 	}
  		 	.save-button{
  		 		color: #000;
  		 		border: 1rpx solid #ccc;
  		 		width: 100rpx;
  		 		height: 50rpx;
  		 		line-height: 50rpx;
  		 		text-align: center;
  		 	    border-radius: 20rpx; /* 圆角效果 */
  		 	    cursor: pointer; /* 鼠标指针样式 */
  		 	}
  		 }
  		 .folder-name-container {
  		   // background-color: white;
  		   display: flex;
  		   align-items: center;
  		   justify-content: space-between; /* 让内容分布在两侧 */
  		   border-bottom: 1rpx solid #ccc;
  		   margin-top: 10px;
  		   padding: 0 10rpx;
  		   .char-count {
  		     font-size: 14px;
  		     color: #888;
  		   }
  		   .folder-name-input {
  		    // width: 80%; /* 输入框占据大部分宽度 */
  			 flex: 1;
  		     padding: 10px;
  		     font-size: 16px;
  		     //border-radius: 4px;
  		   }
  		 }
  		 .folder-description-container {
  			// background-color: white;
  		   margin-top: 10px;
  		   .folder-description-input {
  		     width: 100%;
  		     padding: 10px;
  		     font-size: 16px;
  		     height: 100px;
  		     border-bottom: 1rpx solid #ccc;
  		     //border-radius: 4px;
  			 box-sizing: border-box;
  		     resize: none;
  		   }
  		   
  		   .description-count {
  		     margin-top: 5px;
  		     text-align: right;
  		     font-size: 12px;
  		     color: #888;
  		   }
  		 }
  		.default, .no-public-visibility,.public-visibility {
  			// background-color: white;
  		   display: flex;
  		   justify-content: space-between; /* 让文本和选择框分别位于左右 */
  		   align-items: center; /* 垂直居中 */
  		   margin:10px 0px; /* 上边距，根据需求调整 */
  		   padding: 0 10px;
  		   .visibility-text {
  		     font-size: 20px;
  		     color: #333;
  		   }
  		   .select-icon {
  		     display: flex;
  		     align-items: center;
  			 justify-content: center;
  		     .icon {
  		       width: 20px;
  		       height: 20px;
  		     }
  		   }
  		 }
  		 // .no-public-visibility{
  			//  border-bottom: 1rpx solid #ccc; 
  		 // }
  		 
  		
  		 
  		 
  
  		 
  		 
  		 
  		
  
  	}
  }
   /* 滑入效果 */
    .update-create-folder-modal.slide-in {
      transform: translateY(0); /* 滑入 */
      opacity: 1; /* 完全可见 */
    }
    
    /* 滑出效果 */
    .update-create-folder-modal.slide-out {
      transform: translateY(100%); /* 滑出 */
      opacity: 0; /* 完全透明 */
    }
  .delete-folder-modal{
	padding: 30rpx;
	box-sizing: border-box;
  	position: fixed;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	width: 100%;
  	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
  	display: flex;
  	justify-content: center;
	align-items: center;
  //	align-items: flex-end; /* 从底部对齐 */
  	z-index: 10001; /* 确保模态框位于最上层 */
  	/* 初始状态为隐藏 */
  	transform: translateY(100%);
  	opacity: 0;
  	transition:  opacity 0.5s ease; /* 添加过渡效果 */
  	//background-color: red;
  	.modal-content{
  		  background-color: white;
  		//background-color:;
  		 padding: 20rpx;
  		 border-radius: 30rpx;
  		 width: 100%;
  		// height: 500rpx; /* 最大高度 */
  		 box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  		 display: flex;
  		 flex-direction: column; /* 纵向布局 */
  		 position: relative;
		 .modal-item {
		   display: flex;
		   align-items: center;
		   padding: 12px;
		   border-bottom: 1px solid #ddd;
		   .icon {
		     color: #000;
		     font-size: 30rpx;
		     width: 40rpx;
		     height: 40rpx;
		     text-align: center;
		     line-height: 40rpx;
		     margin-right: 12px;
		   }
		   
		   .text {
		     font-size: 16px;
		     color: #333;
		   }
		 }
		 
		 .modal-item:last-child {
		   border-bottom: none; /* 去掉最后一行的边框 */
		 }
		 
		
	}
}
 /* 滑入效果 */
  .delete-folder-modal.slide-in {
    transform: translateY(0); /* 滑入 */
    opacity: 1; /* 完全可见 */
  }
  
  /* 滑出效果 */
  .delete-folder-modal.slide-out {
    transform: translateY(100%); /* 滑出 */
    opacity: 0; /* 完全透明 */
  }

  /* 自定义导航栏样式 */
  .custom-slot-header{
	padding: 10rpx;
	font-size: 20px;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.5);
	//background-color: red;
  }
  .folder-item {
    display: flex;
    justify-content: space-between; /* 左右布局 */
    padding: 10px;
    border-bottom: 1px solid #ddd;
	margin-bottom: 10rpx;
    .left {
  	display: flex;
  	flex-direction: column; /* 纵向布局 */
  	position: relative;
  	//background-color: red;
      flex: 1; /* 左侧区域占据剩余空间 */
  	.folder-header {
  	  display: flex;
  	  justify-content: space-between; /* 左右分布：名称和默认标签 */
  	  align-items: center;
  	  .folder-info {
  	    display: flex;
  	    align-items: center;
  	    .folder-name {
  	      font-weight: bold;
  	      color: #333;
  	      margin-right: 10px;
  	    }
  	    
  	    .default-tag {
  	      background-color: #4caf50;
  	      color: white;
  	      padding: 2px 8px;
  	      border-radius: 4px;
  	      font-size: 12px;
  	    }
  	    
  	  }
  	}
  	.folder-details {
  	//background-color: #0056b3;
  	  display: flex;
  	  //justify-content: space-between; /* 内容与可见性状态分开显示 */
  	  align-items: center;
  	  margin-top: 5px;
  	  font-size: 14px;
  	  color: #777;
  	  .folder-content {
  	    margin-right: 10px;
  	  }
  	  
  	  .visibility-status {
  	    font-style: italic;
  	  }
  	}
  	
    }
    .right {
  	//background-color: #007BFF;
      display: flex;
      align-items: center;
      justify-content: center;
      .select-icon {
  		display: flex;
  		align-items: center;
  		justify-content: center;
        cursor: pointer;
        .iconfont {
          color: #000;
          font-size: 40rpx;
          width: 40rpx;
          height: 40rpx;
          text-align: center;
          line-height: 40rpx;
        }
      }
    }
  }
  .custom-navbar {
    padding-top: var(--status-bar-height); /* 状态栏高度 */
    font-size: 1.2rem;
    height: 80rpx; /* 导航栏高度 */
    width: 100%;
    background-color: #f8f8f8; /* 背景颜色 */
    position: sticky; /* 固定在页面顶部 */
    top: 0;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  
    /* 左侧部分 */
    .left {
      position: absolute;
      left: 0;
      height: 80rpx;
      width: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
  
      .iconfont {
        color: #000;
        font-size: 40rpx;
        width: 50%;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
      }
    }
  
    /* 中间部分 */
    .center {
      color: #000;
      font-family: "楷体", "SimSun", "宋体", sans-serif; /* 设置字体 */
    }
  
    /* 右侧部分 */
    .right {
	 //padding: 10rpx;
	// background-color: red;
      position: absolute;
      right: 0;
      height: 80rpx;
     // width: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
	  .newly-built-button{
		  background-color: ghostwhite;
	  }
      .iconfont {
		margin-right: 30rpx;
        color: #000;
        font-size: 50rpx;
        width: 50rpx;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
      }
    }
  }
  .content{
	  flex: 1;
	  //background-color: red;
  }
  }
</style>
<!-- const newRecommendedPosts= result.data.map((item) => {
										let coverImage='loadingImg';
										
										let profileImg='loadingImg';
										// let profileImg=this.defaultProfileImg;
										const newPost={
											id: item.postId,
											userId:item.userId,
											username: item.authorName,
											postTitle: item.title,
											postIntroduce: item.blogDescribe,
											profileImg: profileImg,
											pictureImg: coverImage,
											viewCount: item.shareCount, // 浏览量
											likeCount: item.likesCount, // 点赞量
											collectCount: item.favoriteCount
										}
									    console.log(newPost);
									    return newPost; 
									});
									
									if(!newRecommendedPosts){
										newRecommendedPosts=[];
									}
									 if (type === 'loadMore') {
									    console.log("index加载数据");
									    newRecommendedPosts.forEach(newPost => {
									        const index = this.recommendedPosts.findIndex(post => post.id === newPost.id);
									        if (index > -1) {
									            this.recommendedPosts.splice(index, 1, newPost);
									        } else {
									            this.recommendedPosts.push(newPost);
									        }
									    });
									 }else if(type==="refresh"){
										 console.log("index刷新数据");
										 this.recommendedPosts=newRecommendedPosts;
										 //this.lastRefreshTime = new Date().toLocaleString();
										 //this.recommendedPostRefresh=true;
										 //resolve([]);
									}
									//console.log("加载的推荐博客是",newRecommendedPosts);
									//newRecommendedPosts
									console.log(this.recommendedPosts);
									resolve(newRecommendedPosts); -->